<template>
  <div>
    <el-row>
      <el-form label-width="125px" label-position="right">
      <el-form-item label="调整类型:">
        <el-radio-group v-model="adjustmentType" style="width: 100%">
          <el-radio :label="1" v-if="checkPermi(['order:orderBasic:newExpenses'])">新增费用</el-radio>
          <el-radio :label="2" v-if="canReduction&&checkPermi(['order:orderBasic:addExpenses'])">租金减免</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-form>
    </el-row>
    <template v-if="adjustmentType==1">
      <el-row>
          <el-table :data="chargeItemsVo" border>
            <el-table-column label="收费项名称" prop="chargeProjectName" align="center">
              <template slot-scope="{ row }">
                <el-input v-model="row.chargeProjectName"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="单价" prop="unitPrice" align="center">
              <template slot-scope="{ row }">
                <el-input v-model="row.unitPrice" @keyup.native="row.unitPrice= oninput(row.unitPrice, 2);row.chargeMoney=(row.unitPrice*row.number).toFixed(2)">
                  <el-button slot="append">元</el-button>
                </el-input>
              </template>
            </el-table-column>

            <el-table-column label="收费类型" prop="chargeItemsType" align="center">
              <template slot-scope="{ row }">
                <el-select v-model="row.chargeItemsType" clearable  @change="changeType(row)">
                  <el-option label="按次" :value="1"></el-option>
                  <el-option label="按天" :value="2"></el-option>
                  <el-option label="按里程" :value="3"></el-option>
                  <el-option label="按个" :value="6"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="数目" prop="number" align="center">
              <template slot-scope="{ row }">
                <el-input  v-model="row.number" @keyup.native="row.number= oninput(row.number, 0);row.chargeMoney=(row.unitPrice*row.number).toFixed(2)"></el-input>
              </template>
            </el-table-column>


            <el-table-column label="费用" prop="chargeMoney" align="center">
              <template slot-scope="{ row }">
                {{ row.chargeMoney }}元
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteChargingItems(row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        <el-col :span="24" style="text-align: center;margin-bottom: 10px">
          <el-button icon="el-icon-plus" @click="addChargingItems">添加收费项</el-button>
        </el-col>
      </el-row>
      <el-row style="text-align: end;">
        <el-button @click="closeDiolog()">取消</el-button>
        <el-button @click="addNewExpenses" type="primary">保存</el-button>
      </el-row>
    </template>
    <template v-else>
      <MmvTitle title="租赁费用">
          <el-row slot="btn" style="text-align: center;margin-top: 5px;width: 600px">
          <el-col :span="6" style="font-size: 16px;font-weight: bold;color: brown">
            已付费用:{{rentPaidAmount}}元
          </el-col>
          <el-col :span="6" style="font-size: 16px;font-weight: bold;color: red" v-if="refundableRent">
            应退金额:{{refundableRent}}元
          </el-col>
          </el-row>
      </MmvTitle>
      <el-row>
          <el-table :data="rentItemsVo" border show-summary :summary-method="getSummaries">
            <el-table-column label="收费项名称" prop="chargeProjectName" align="center">
              <template slot-scope="{ row }">
                <span v-if="row.isRent==3||row.isRent==4" style="color: red">{{row.chargeProjectName}}</span>
                <span v-else>{{row.chargeProjectName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="unitPrice" align="center">
              <template slot-scope="{ row }">
                <el-input v-if="row.isRent==1" v-model="row.unitPrice" @keyup.native="row.unitPrice= oninput(row.unitPrice, 2);row.chargeMoney=(row.unitPrice*row.number).toFixed(2)">
                  <el-button slot="append">元</el-button>
                </el-input>
                <span v-else>{{row.unitPrice||''}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收费类型" prop="chargeItemsType" align="center">
              <template slot-scope="{ row }">
                <span> {{ {1: '按次', 2: '按天', 3: '按里程', 6: '按个'}[Number(row.chargeItemsType)] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数目" prop="number" align="center"/>
             <el-table-column label="费用" prop="chargeMoney" align="center">
              <template slot-scope="{ row }">
                <el-input v-if="row.isRent==1" v-model="row.chargeMoney" @keyup.native="row.chargeMoney= oninput(row.chargeMoney, 2);row.unitPrice=(row.chargeMoney/row.number).toFixed(2)">
                  <el-button slot="append">元</el-button>
                </el-input>
                <el-input v-else-if="row.isRent==4" v-model="row.chargeMoney" @keyup.native="row.chargeMoney= oninput(row.chargeMoney, 2);" style="color: red">
                  <template slot="prepend">减</template>
                  <el-button slot="append">元</el-button>
                </el-input>
                <span v-else>{{row.chargeMoney}}</span>
              </template>
            </el-table-column>
          </el-table>
      </el-row>
      <el-row v-if="renewalItemsVo.length>0">
        <MmvTitle title="续租费用">
          <el-row slot="btn" style="text-align: center;margin-top: 5px;width: 600px">
            <el-col :span="6" style="font-size: 16px;font-weight: bold;color: brown">
              已付费用:{{renewalPaidAmount}}元
            </el-col>
            <el-col :span="6" style="font-size: 16px;font-weight: bold;color: red" v-if="refundableRenewal">
              应退金额:{{refundableRenewal}}元
            </el-col>
          </el-row>
        </MmvTitle>
        <el-table :data="renewalItemsVo" border show-summary :summary-method="getSummaries">
            <el-table-column label="收费项名称" prop="chargeProjectName" align="center"/>
            <el-table-column label="单价" prop="unitPrice" align="center">
              <template slot-scope="{ row }">
                <el-input v-if="row.isRent==1" v-model="row.unitPrice" @keyup.native="row.unitPrice= oninput(row.unitPrice, 2);row.chargeMoney=(row.unitPrice*row.number).toFixed(2)">
                  <el-button slot="append">元</el-button>
                </el-input>
                <span v-else>{{row.unitPrice}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收费类型" prop="chargeItemsType" align="center">
              <template slot-scope="{ row }">
                <span> {{ {1: '按次', 2: '按天', 3: '按里程', 6: '按个'}[Number(row.chargeItemsType)] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数目" prop="number" align="center"/>
             <el-table-column label="费用" prop="chargeMoney" align="center">
              <template slot-scope="{ row }">
                <el-input v-if="row.isRent==1" v-model="row.chargeMoney" @keyup.native="row.chargeMoney= oninput(row.chargeMoney, 2);row.unitPrice=(row.chargeMoney/row.number).toFixed(2)">
                  <el-button slot="append">元</el-button>
                </el-input>
                <span v-else>{{row.chargeMoney}}</span>
              </template>
            </el-table-column>
          </el-table>
      </el-row>
      <el-row style="text-align: center;margin-top: 20px">
        <el-col :span="6" style="font-size: 16px;font-weight: bold">
          费用合计:{{totalExpenses}}元
        </el-col>
        <el-col :span="6" style="font-size: 16px;font-weight: bold">
          已付金额:{{(rentPaidAmount+renewalPaidAmount).toFixed(2)}}元
        </el-col>
        <el-col :span="6" style="font-size: 16px;font-weight: bold">
          待付金额:{{amountToBePaid}}元
        </el-col>
      </el-row>
      <el-row style="text-align: end;margin-top: 20px">
        <el-button @click="closeDiolog()">取消</el-button>
        <el-button @click="costAdjustment" type="primary">保存</el-button>
      </el-row>
    </template>
  </div>
</template>

<script>
import * as api from "@/api/order";
import MmvTitle from "@/components/MmvUI/MmvTitle";
import { checkPermi } from '@/utils/permission'
export default {
  name: "costAdjustment",
  components: {
    MmvTitle
  },
  props: ['orderNo'],
  data() {
    return {
      adjustmentType: checkPermi(['order:orderBasic:newExpenses'])?1:2,
      chargeItemsVo: [{
        chargeProjectName: '',
        unitPrice: 0,
        chargeItemsType: 1,
        number: 1,
        canEdit: 3,
        chargeMoney: 0,
      }],
      canReduction:false,
      rentItemsVo: [],
      rentPaidAmount: 0,
      leaseDays: 0,
      renewalItemsVo: [],
      renewalPaidAmount: 0,
    }
  },
  computed: {
    totalRent() {
      let rentSum=0;
      for (let item of this.rentItemsVo){
        if (item.isRent>2) {
          rentSum =rentSum-  Number(item.chargeMoney);
        } else {
          rentSum =rentSum+ Number(item.chargeMoney);
        }
      }
      return rentSum.toFixed(2)
    },
    totalRenewal() {
      let renewalSum=0;
      for (let item of this.renewalItemsVo){
        renewalSum =renewalSum+ Number(item.chargeMoney);
      }
      return renewalSum.toFixed(2)
    },
    totalExpenses() {
      return (Number(this.totalRent)+Number(this.totalRenewal)).toFixed(2)
    },
    amountToBePaid() {
      let num=Number(this.totalExpenses)-this.rentPaidAmount-this.renewalPaidAmount;
      if(!isNaN(Number(num))&&num>0){
        return num.toFixed(2)
      }else{
        return 0
      }
    },
    refundableRent() {
      let num=this.rentPaidAmount-Number(this.totalRent);
      if(!isNaN(Number(num))&&num>0){
        return num.toFixed(2)
      }else{
        return 0
      }
    },
    refundableRenewal() {
      let num=this.renewalPaidAmount-Number(this.totalRenewal);
      if(!isNaN(Number(num))&&num>0){
        return num.toFixed(2)
      }else{
        return 0
      }
    },
  },
  mounted() {
    api.costAdjustmentDetail(this.orderNo).then(res=>{
      this.rentItemsVo=res.data.rentItemsVo
      this.renewalItemsVo=res.data.renewalItemsVo||[]
      this.rentPaidAmount=res.data.rentPaidAmount||0
      this.renewalPaidAmount=res.data.renewalPaidAmount||0
      this.canReduction=res.data.canReduction||false
      this.leaseDays=res.data.leaseDays||0
    })
  },
  methods: {
    checkPermi,
    addChargingItems() {
      this.chargeItemsVo.push({
        chargeProjectName: '',
        unitPrice: 0,
        chargeItemsType: 1,
        number: 1,
        canEdit: 3,
        chargeMoney: 0,
        chargeProjectCategory: 9,
        selected: true
      })
    },
    changeType(row){
      if(row.chargeItemsType==2){
        row.number=this.leaseDays
        row.chargeMoney=(row.unitPrice*row.number).toFixed(2)
      }else{
        row.number=1
        row.chargeMoney=(row.unitPrice*row.number).toFixed(2)
      }
    },
    deleteChargingItems(row) {
      const index = this.chargeItemsVo.map(f => f.chargeProjectName).indexOf(row.chargeProjectName);
      this.chargeItemsVo.splice(index, 1)
    },
    addNewExpenses() {
      if (this.testItemsVo()) {
        api.addNewExpenses({orderNo: this.orderNo, chargeItemsVo: this.chargeItemsVo}).then(res => {
          this.closeDiolog()
        })
      }
    },
    costAdjustment() {
      let rentSum=0;
      for (let item of this.rentItemsVo){
        if (item.isRent>2) {
          rentSum =rentSum-  Number(item.chargeMoney);
        } else {
          rentSum =rentSum+ Number(item.chargeMoney);
        }
      }
      let renewalSum=0;
      for (let item of this.renewalItemsVo){
        renewalSum =renewalSum+ Number(item.chargeMoney);
      }
      if(this.totalExpenses<0){
        this.$message.error('费用合计不能小于0')
        return false;
      }else{
        api.costAdjustment({orderNo: this.orderNo, rentItemsVo: this.rentItemsVo, renewalItemsVo: this.renewalItemsVo}).then(res => {
          this.closeDiolog()
        })
      }
      // if(rentSum<this.rentPaidAmount){
      //   this.$message.error('租金合计不能小于已付金额')
      //   return false;
      // }else if(renewalSum<this.renewalPaidAmount){
      //   this.$message.error('续租租金合计不能小于已付金额')
      //   return false;
      // }else{
      //   api.costAdjustment({orderNo: this.orderNo, rentItemsVo: this.rentItemsVo, renewalItemsVo: this.renewalItemsVo}).then(res => {
      //     this.closeDiolog()
      //   })
      // }

    },
    testItemsVo() {
      if (this.chargeItemsVo) {
        for (let item of this.chargeItemsVo) {
          if (!item.chargeProjectName) {
            this.$message.error('费用项名称不能为空')
            return false;
          }
          if (!item.unitPrice) {
            this.$message.error('单价不能为空且应大于零')
            return false;
          }
          if (!item.chargeItemsType) {
            this.$message.error('请选择费用类型')
            return false;
          }
          if (!item.number) {
            this.$message.error('数目不能为空且应大于零')
            return false;
          }
        }
        return true
      } else {
        this.$message.error('费用项不能为空')
        return false;
      }

    },
    closeDiolog() {
      this.$emit('close');
    },
    getSummaries(param){
      const { columns, data } = param;

      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }else if (index === 4) {
          let sum=0;
          for (let item of data){
            if (item.isRent>2) {
              sum =sum-  Number(item.chargeMoney);
            } else {
              sum =sum+ Number(item.chargeMoney);
            }
          }
          sums[index] =(sum).toFixed(2)+ ' 元';
        }else{
          sums[index]=""
        }
      });

      return sums;
    }
  }
}
</script>

<style scoped>

</style>
